<template>
  <div>
    <el-button
      v-if="showSettleBtn"
      @click="clickBtn"
      plain
      :disabled="showSettleBtn"
    >
      选择结算单明细
    </el-button>
    <el-button v-else @click="clickBtn" type="single-number" plain
      >选择结算单明细</el-button
    >
    <el-dialog
      :visible.sync="dialogVisibleSettle"
      custom-class="sorting-code-number"
      maxHeight="null"
      title="选择结算单明细"
      width="990px"
    >
      <!-- <div class="el-dialog__body-header"> -->
      <el-form :model="form" ref="form" label-width="170px" class="ccui-form">
        <el-row :span="20">
          <el-col :span="10">
            <el-form-item label="结算单编号：">
              <div v-text="form.settlementCode"></div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="结算单名称：">
              <div v-text="form.settlementName"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- </div> -->
      <div class="el-dialog__body-bodys">
        <div class="bodys-right">
          <el-table
            :data="tableData"
            :fit="true"
            :lineClamp="lineClampBody"
            maxHeight="390"
            style="width: 950px"
            @select="handleCheckChange"
            @select-all="handleCheckAllChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <template v-for="(table, index) in unfixedTableThead">
              <el-table-column
                :fixed="table.fixed || false"
                :key="index"
                :type="table.type"
                :label="table.label"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :min-width="table.width"
                :prop="table.prop"
                :show-overflow-tooltip="true"
                border="true"
              >
              </el-table-column>
            </template>
          </el-table>
          <div class="table-footer" style="height: 30px">
            <div class="ccui-table-footer">
              <div id="ccui-paging">
                <el-pagination
                  :current-page="pageNoCode"
                  :page-size="pageSizeCode"
                  :pager-count="5"
                  :page-sizes="[10, 20, 50, 100, 200, 500]"
                  :total="totalNum"
                  background
                  @addCurrentPage="internalCurrentPage"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  layout="total,sizes, prev, pager, next, jumper"
                  next-text="下一页 >"
                  popper-class="ccui-paging-page-size-popper"
                  prev-text="< 上一页"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="handleFalse"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="handleTrue"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ishasAgentId } from "@/basa/utils";
import { getSettlementListById } from "../api";
import { formatNumber } from "@/basa/utils";
export default {
  props: ["showSettleBtn"],
  data() {
    return {
      dialogVisibleSettle: false,
      pageNoCode: 1,
      pageSizeCode: 10,
      totalNum: 0,
      tableData: [],
      lineClampBody: true,
      form: {
        settlementName: "", //结算单名称
        settlementCode: "", //结算单编号
        id: "" //结算单id
      },
      unfixedTableThead: [
        { prop: "materialCode", label: "设备物资编码", width: "110" },
        { prop: "materialName", label: "设备物资名称", width: "110" },
        { prop: "materialState", label: "设备物资说明", width: "110" },
        { prop: "measureUnit", label: "计量单位", width: "120" },
        { prop: "settlementCount", label: "数量", width: "120" },
        {
          prop: "unitPriceWithoutTax",
          label: "不含税单价",
          width: "90",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "unitPriceWithTax",
          label: "含税单价",
          width: "90",
          headerAlign: "left",
          align: "right"
        },
        { prop: "taxRatePercent", label: "税率", width: "90" },
        {
          prop: "moneyWithoutTax",
          label: "不含税金额",
          width: "90",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "rate",
          label: "税额",
          width: "80",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "moneyWithTax",
          label: "含税金额",
          width: "90",
          headerAlign: "left",
          align: "right"
        },
        { prop: "brand", label: "生产厂家/品牌", width: "90" }
      ],
      selectData: []
    };
  },
  methods: {
    clickBtn() {
      console.log(
        this.form.settlementCode,
        this.form.settlementName,
        this.form.id
      );
      if (
        !this.form.settlementCode ||
        !this.form.settlementName ||
        !this.form.id
      ) {
        this.$showErrorMessage("请选择结算单");
        return;
      } else {
        this.dialogVisibleSettle = true;
        this.getList();
      }
    },
    beforeClose() {},
    // 取消
    handleFalse() {
      this.dialogVisibleSettle = false;
    },
    // 确定
    handleTrue() {
      this.dialogVisibleSettle = false;
      this.$emit("getSettlementList", this.selectData);
    },
    handleCheckChange(val) {
      this.selectData = val;
    },
    handleCheckAllChange(val) {
      this.selectData = val;
    },
    handleSizeChange(val) {
      this.pageSizeCode = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getList();
    },
    internalCurrentPage(val) {
      val = 1;
    },
    handlePrev() {},
    handleNext() {},
    getList() {
      let obj = {
        id: this.form.id,
        pageNoCode: this.pageNoCode,
        pageSize: this.pageSizeCode
      };
      getSettlementListById(obj).then(res => {
        this.tableData = res.data.data.rows;
        this.totalNum = res.data.data.total;
        this.tableData.forEach(item => {
          item.settlementCount = formatNumber(item.settlementCount, 3); //数量
          // item.unitPriceWithoutTax = item.unitPriceWithoutTax?item.unitPriceWithoutTax.toFixed(2):'0.00'; //不含税单价
          item.unitPriceWithTax = item.unitPriceWithTax
            ? item.unitPriceWithTax.toFixed(2)
            : "0.00"; //含税单价
          item.moneyWithoutTax = item.moneyWithoutTax
            ? item.moneyWithoutTax.toFixed(2)
            : "0.00"; // 不含税金额
          item.rate = item.rate ? item.rate.toFixed(2) : "0.00"; //税额
          item.moneyWithTax = item.moneyWithTax
            ? item.moneyWithTax.toFixed(2)
            : "0.00"; //含税金额
        });
      });
    }
  },
  created() {
    this.$bus.$on("settlementBasicName", msg => {
      this.$set(this.form, "settlementName", msg);
    });
    this.$bus.$on("settlementBasicCode", msg => {
      this.$set(this.form, "settlementCode", msg);
    });
    this.$bus.$on("settlementBasicId", msg => {
      this.$set(this.form, "id", msg);
    });
  },
  beforeRouteLeave(to, from, next) {
    for (var key in this.$vnode.parent.parent.componentInstance.cache) {
      delete this.$vnode.parent.parent.componentInstance.cache[
        ishasAgentId(to.path, key)
      ];
    }
    next();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input .el-pagination__editor .is-in-pagination {
  width: 80px !important;
}
/deep/ .el-dialog__header {
  display: flex;
}
/deep/ .el-dialog__header .el-dialog__title {
  margin-top: 10px;
}
/deep/ .ccui-form {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-size: 13px;
}
</style>
